<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-body">
        <div class="top-box">
          <el-image
            v-if="pageAjax.data.headImg"
            style="width: 100px; height: 100px; border-radius:50%"
            :src="pageAjax.data.headImg"
            fit="cover"
          ></el-image>
          <div style="flex:1;padding-left: 30px">
            <!-- <el-radio-group v-model="radio1">
              <el-radio-button label="1">基本信息</el-radio-button>
            </el-radio-group> -->
            <div>
              <div style="padding-top: 10px">
                <div v-if="pageAjax.data.nickName" class="inline-block">
                  昵称: {{ pageAjax.data.nickName }}
                </div>
                <!-- <div class="inline-block">
                    姓名: {{ pageAjax.data.nickName || "无" }}
                  </div> -->
                <div class="inline-block">
                  性别: {{ pageAjax.data.gender == 1 ? "男" : "女" }}
                </div>

                <div v-if="pageAjax.data.wxNo" class="inline-block">
                  微信号: {{ pageAjax.data.wxNo }}
                </div>
                <div v-if="pageAjax.data.contractPhone" class="inline-block">
                  联系电话: {{ pageAjax.data.contractPhone }}
                </div>
                <div v-if="pageAjax.data.idCard" class="inline-block">
                  身份证号码: {{ pageAjax.data.idCard }}
                </div>
                <div v-if="pageAjax.data.idCard" class="inline-block">
                  直播平台: {{ pageAjax.data.idCard }}
                </div>
                <div v-if="pageAjax.data.anchorNo" class="inline-block">
                  直播Id: {{ pageAjax.data.anchorNo }}
                </div>
                <div v-if="pageAjax.data.signStatus" class="inline-block">
                  签约状态:
                  {{
                    $store.state.SIGN.STATUS.translate[pageAjax.data.signStatus]
                  }}
                </div>
                <div>
                  <div
                    v-if="pageAjax.data.bindingNickName"
                    class="inline-block"
                  >
                    所属运营: {{ pageAjax.data.bindingNickName }}
                  </div>
                </div>

                <!-- {{ pageAjax.data.intentionPlatforms.length }} -->
              </div>
            </div>
          </div>
        </div>

        <el-divider></el-divider>
        <div>
          <div
            class="mi-upload mi-uploadVideo"
            v-if="pageAjax.data.videoList.length"
          >
            <div class="mi-title">
              视频：
            </div>
            <div class="m-files">
              <div class="m-preview clearfix">
                <div
                  class="m-file"
                  v-for="(item, index) in pageAjax.data.videoList"
                  :key="index"
                >
                  <div class="m-respBox">
                    <div class="m-full">
                      <div
                        class="m-operation video flex item-v-center item-h-center"
                      >
                        <i
                          class="el-icon-video-play"
                          @click="rViewVideo(item)"
                        ></i>
                      </div>
                      <video :src="item"></video>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="mi-upload mi-uploadImg"
            v-if="pageAjax.data.imageList.length"
          >
            <div class="mi-title">
              主播图片(第一张默认为主播头像)：
            </div>

            <div class="m-files">
              <div class="m-preview clearfix">
                <template>
                  <div
                    class="m-file pic"
                    v-for="(item, index) in pageAjax.data.imageList"
                    :key="index"
                  >
                    <div class="m-respBox">
                      <div class="m-full">
                        <el-image
                          fit="cover"
                          :src="item"
                          :preview-src-list="[item]"
                        >
                        </el-image>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="mi-upload" v-if="pageAjax.data.videoLinkList.length">
            <div class="mi-title">
              视频链接<template
                v-for="(item, index) in pageAjax.data.videoLinkList"
              >
                <el-link
                  class="link"
                  :key="index"
                  :href="pageAjax.data.videoLinkList[index]"
                  target="_blank"
                  >视频链接{{ index + 1 }}</el-link
                >
              </template>
            </div>
          </div>
        </div>
        <div class="c-videoLink"></div>
      </div>
    </div>

    <!-- 视频预览 -->
    <el-dialog
      title
      :visible.sync="videoPreviewCp.config.show"
      width="60%"
      class="videoPreviewCpClass"
      @close="rCloseVideoPreviewCp"
    >
      <div class="c-videoBox">
        <div class="c-video">
          <video
            :src="videoPreviewCp.data.src"
            controls
            autoplay
            class="video"
            ref="videoPreviewCpRef"
            width="100%"
          ></video>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { getActorInfoByUnion } from "@/api/actor.js";
import { getBiPlatformList } from "@/api/others.js";
import _ from "lodash";

export default {
  name: "actorDetail",
  data: () => ({
    pageAjax: {
      loading: false,
      data: {
        realName: "",
        gender: 1,
        wxNo: "",
        contractPhone: "",
        idCard: "",
        anchorNo: "",
        signStatus: "",
        platform: "",
        userId: "",
        imageList: [],
        videoList: [],
        videoLinkList: [],
        onlineType: "union"
      },
      rules: {
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }]
      }
    },
    biPlatformListSupAjax: {
      data: []
    },
    translate: {
      biPlatformList: {}
    },

    videoPreviewCp: {
      config: {
        show: false
      },
      data: {
        src: ""
      }
    }
  }),

  created() {
    let _that = this;
    _that.getBiPlatformListData().then(() => {
      _that.getPageData();
    });
  },
  methods: {
    rCloseVideoPreviewCp() {
      this.videoPreviewCp.data.src = "";
      this.videoPreviewCp.config.show = false;
    },
    rViewVideo(src) {
      let _that = this;

      _that.videoPreviewCp.data.src = src;
      _that.videoPreviewCp.config.show = true;
    },

    getPageData() {
      let _that = this;

      return getActorInfoByUnion({ anchorId: _that.$route.query.anchorId })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {});
    },

    getBiPlatformListData() {
      let _that = this;
      return getBiPlatformList()
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            let arr = respData.data.filter(item => {
              if (item.value != "all") {
                _that.translate.biPlatformList[item.value] = item.name;
                return item;
              }
            });
            _that.biPlatformListSupAjax.data = arr;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {});
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.top-box {
  display: flex;
  min-height: 150px;
}
.inline-block {
  display: inline-block;
  line-height: 36px;
  margin-right: 30px;
  min-width: 160px;
}

.in {
  display: inline-block;
  line-height: 36px;
  margin-right: 30px;
  font-size: 16px;
}
.page {
  font-size: 14px;
  .block {
    display: block;
  }
  .inlineBlock {
    display: inline-block;
  }
  .mi-title {
    // color: #999;
  }
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-main {
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }

  .mi-upload {
    padding: 20px;
    .mi-title {
      margin-bottom: 20px;
      padding-left: 110px;
      font-size: 14px;
      // color: #333;
    }
    .link {
      display: inline-block;
      margin-left: 20px;
      font-size: 18px;
      color: #409eff;
    }
    .m-preview {
      text-align: center;
    }

    .m-file {
      position: relative;
      // float: left;
      display: inline-block;
      // width: 400px;
      // height: 400px;
      width: 30%;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #ebeef5;
      box-sizing: border-box;
      img,
      video {
        display: block;
        width: 100%;
        height: 100%;
      }
      &:hover .m-operation {
        opacity: 1;
      }
    }
    // .pic {
    //   width: 260px;
    //   height: 260px;
    // }
    .m-operation {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      transition: opacity 0.4s;
      i {
        font-size: 20px;
        padding: 10px 20px;
      }
      .el-icon-video-play {
        font-size: 66px;
        cursor: pointer;
      }
    }
    .m-respBox {
      width: 100%;
      padding-top: 100%;
      position: relative;
    }
    .m-full {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .video {
      opacity: 1;
    }
    .m-addBtn {
      border: 1px dashed #c0ccda;
      border-radius: 10px;
      font-size: 28px;
      color: #ebeef5;
      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }
  }
  .mi-uploadVideo {
    .m-file {
      position: relative;
      width: 30%;
    }
  }
  .mi-uploadImg {
    .m-file {
      position: relative;
      width: 18%;
    }
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .c-videoLink {
    .el-input {
      margin-right: 10px;
      width: 270px;
      vertical-align: top;
    }
  }
  .c-liveExpEditVoList {
    display: flex;
    .c-liveExpEditVo {
      border-top: 1px solid #ebeef5;
      padding-top: 20px;
      .mi-title {
        padding-left: 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.el-image .el-icon-circle-close {
  color: #fff;
  background: #000;
  border-radius: 50%;
}
.el-form--inline .el-form-item__content,
.el-form-item__content {
  vertical-align: middle;
}
</style>
